<template>
	<gui-page :refresh="true" @reload="reload" :loadmore="true" @loadmorefun="loadData"
		:apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gBody>
			<gui-a-header title="收藏公司"></gui-a-header>
			<view class="company-list">
				<gui-empty v-if="noData">
					<template v-slot:img>
						<view class="gui-flex gui-rows gui-justify-content-center">
							<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
							</image>
						</view>
					</template>
					<template v-slot:text>
						<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
					</template>
				</gui-empty>
				<view class="company-item flex-ac-jb bgfff radius" v-for="(item,index) in dataList" :key="item.id">
					<view class="company-headImg" @tap="`/pages/mine/company-collect-detail?id=${item.id}`">
						<gui-image :src="item.logo" :width="122" :height="122" borderRadius="14rpx"
							mode="aspectFill"></gui-image>
					</view>
					<view class="company-info flex1 flex-dc">
						<text class="gui-bold">{{item.companyName}}</text>
						<text class="c666 f22">{{item.industry}}/{{item.personnel}}</text>
						<view class="flex-ac-row f18" v-if="item.welfareTreatment">
							<view class="post-label c999" v-for="(wItem,wIndex) in item.welfareTreatment.split(',')"
								:key="wIndex">{{wItem}}</view>
						</view>
					</view>
					<view class="saveBtn f20" @click.stop="conpanyCollect(item.id, index)">
						<text>取消收藏</text>
						<image class="icon" src="../../static/mine/collect.png" mode="widthFix" style="height: auto;">
						</image>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		selectUserConsumerCollect,
		usertConpanyCollect
	} from '@/api/user.js';
	const $u = reactive(inject('$u'))
	const guipage = ref(null);
	const loading = ref(true);
	const isClick = ref(true);

	const reload = (isRelod = true) => {
		query.value.pageNum = 1;
		loadData(isRelod);
	}
	const query = ref({
		pageNum: 1,
		pageSize: 10
	})

	const apiLoadingStatus = ref(false)
	const noData = ref(false);
	const dataList = ref([])
	// 查询
	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		selectUserConsumerCollect(queryParam).then(res => {
			if (res.code == 200) {
				var resultArr = res.rows;
				let total = Math.ceil(res.total / queryParam.pageSize);
				if (queryParam.pageNum >= 2) {
					dataList.value = dataList.value.concat(resultArr);
					guipage.value.stoploadmore();
					if (queryParam.pageNum >= total) {
						guipage.value.nomore();
					}
				} else {
					loading.value = false;
					dataList.value = [];
					dataList.value = resultArr;
					if (isReload) {
						guipage.value.endReload();
					} else {
						guipage.value.stoploadmore();
					}
					(resultArr.length <= 0) ? noData.value = true: noData.value = false;
				}
				query.value.pageNum++;
			}
		})
	}

	const conpanyCollect = (id, index) => {
		if (isClick.value) {
			isClick.value = false;
		} else {
			return;
		}
		usertConpanyCollect({
			id
		}).then(res => {
			if (res.code == 200) {
				$u.msg('已取消');
				dataList.value.splice(index, 1);
				if(dataList.value.length <= 0) {
					noData.value = true;
				}
			}
		}).finally(() => {
			isClick.value = true;
		})
	}
	loadData();
</script>

<style lang="scss">
	.saveBtn {
		width: 130rpx;
		height: 43rpx;
		border-radius: 14rpx;
		font-size: 20rpx;
		background: rgba(64, 114, 254, 1);

		.icon {
			width: 20rpx;
			margin-left: 10rpx;
		}
	}
</style>